<!DOCTYPE html>
<html lang="en" dir=ZgotmplZ>

<head>
  <script async defer src="https://buttons.github.io/buttons.js"></script>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Feature Toggles # Use FuroFeatureToggle to implement toggles for the following scenarios: 1
release toggles - in the context of Continuous Delivery, unfinished features are toggled off, and only activated when the feature is ready. However, the source code is transferred to the master branch earlier and deployed to the various stages. experiment toggles - the classic, for example for A/B tests ops toggles - this refers to switches under operational aspects.">
<meta name="theme-color" content="#FFFFFF"><meta property="og:title" content="Feature Toggles" />
<meta property="og:description" content="Feature Toggles # Use FuroFeatureToggle to implement toggles for the following scenarios: 1
release toggles - in the context of Continuous Delivery, unfinished features are toggled off, and only activated when the feature is ready. However, the source code is transferred to the master branch earlier and deployed to the various stages. experiment toggles - the classic, for example for A/B tests ops toggles - this refers to switches under operational aspects." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://web-components.furo.pro/docs/guides/featuretoggle/" /><meta property="article:section" content="docs" />

<meta property="article:modified_time" content="2022-10-24T11:11:41+02:00" />
<title>Feature Toggles | フロー Furo Web</title>
<link rel="manifest" href="/manifest.json">
<link rel="icon" href="/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="/book.min.9cf05710651e8f9a974123fc1a656fbb5eb2f912dba4c022b69792d2f93e1c40.css" integrity="sha256-nPBXEGUej5qXQSP8GmVvu16y&#43;RLbpMAitpeS0vk&#43;HEA=">
<script defer src="/en.search.min.b0bf84841deec51ff6f5057e68d3262d4265b55605be890ebf7c38b97b2fe329.js" integrity="sha256-sL&#43;EhB3uxR/29QV&#43;aNMmLUJltVYFvokOv3w4uXsv4yk="></script>
<!--
Made with Book Theme
https://github.com/alex-shpak/hugo-book
-->

  

  <link href="/main.css" rel="stylesheet"/>
</head>

<body dir=ZgotmplZ>
<fixed-tooltip-display></fixed-tooltip-display>
  <input type="checkbox" class="hidden toggle" id="menu-control" />
  <input type="checkbox" class="hidden toggle" id="toc-control" />
  <div ></div>
  <main class="container flex">
    <aside class="book-menu">
      
  <nav>
<h2 class="book-brand">
  <a href="/"><span>フロー Furo Web</span>
  </a>
</h2>


<div class="book-search">
  <input type="text" id="book-search-input" placeholder="Search" aria-label="Search" maxlength="64" data-hotkeys="s/" />
  <div class="book-search-spinner hidden"></div>
  <ul id="book-search-results"></ul>
</div>











  



  
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-64d0ac0e8a385a6091d238dd382da7cf" class="toggle" checked />
    <label for="section-64d0ac0e8a385a6091d238dd382da7cf" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/guides/" class="">Guides</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/dealing-w-data/" class="">Dealing with data</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-48dba13e1258b1e2cf129032b0d1fc3e" class="toggle"  />
    <label for="section-48dba13e1258b1e2cf129032b0d1fc3e" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/guides/routing/" class="">Routing</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/routing/subrouting/" class="">Sub routing</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/app-flow/" class="">Application Flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/FNA/" class="">Extending a UI lib</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/type-renderer/" class="">Type Renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/guides/featuretoggle/" class=" active">Feature Toggles</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-c131070b1e715f28624af5fdfd93165a" class="toggle"  />
    <label for="section-c131070b1e715f28624af5fdfd93165a" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/" class="">Packages</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-cca842a4d0376120bfbf8e2c08c07ff4" class="toggle"  />
    <label for="section-cca842a4d0376120bfbf8e2c08c07ff4" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-data/" class="">@furo/data</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-api-fetch/" class="">furo-api-fetch</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-collection-agent/" class="">furo-collection-agent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-custom-method/" class="">furo-custom-method</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-flow-repeat/" class="">furo-data-flow-repeat</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-hide-content/" class="">furo-data-hide-content</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-data-object/" class="">furo-data-object</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-deep-link/" class="">furo-deep-link</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-entity-agent/" class="">furo-entity-agent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-entity-field/" class="">furo-entity-field</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-hateoas-state/" class="">furo-hateoas-state</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-message-container-handler/" class="">furo-message-container-handler</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-rel-exists/" class="">furo-rel-exists</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-reverse-deep-link/" class="">furo-reverse-deep-link</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/furo-type-renderer/" class="">furo-type-renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/AgentHelper/" class="">AgentHelper</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/DataObject/" class="">DataObject</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/FieldNode/" class="">FieldNode</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/FieldNodeAdapter/" class="">FieldNodeAdapter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/RepeaterNode/" class="">RepeaterNode</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ScalarTypeHelper/" class="">ScalarTypeHelper</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorDefaultTypes/" class="">ValidatorDefaultTypes</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorFuroBigDecimal/" class="">ValidatorFuroBigDecimal</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorFuroReference/" class="">ValidatorFuroReference</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufBoolValue/" class="">ValidatorGoogleProtobufBoolValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufFloatValue/" class="">ValidatorGoogleProtobufFloatValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleProtobufInt64Value/" class="">ValidatorGoogleProtobufInt64Value</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleTypeDate/" class="">ValidatorGoogleTypeDate</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorGoogleTypeMoney/" class="">ValidatorGoogleTypeMoney</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-data/ValidatorNumericTypes/" class="">ValidatorNumericTypes</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-021db3e6cecc4cb464638d9452766952" class="toggle"  />
    <label for="section-021db3e6cecc4cb464638d9452766952" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-fbp/" class="">@furo/fbp</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/empty-fbp-node/" class="">empty-fbp-node</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/flow-bind/" class="">flow-bind</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/flow-repeat/" class="">flow-repeat</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/DOMFBP/" class="">DOMFBP</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/FBP/" class="">FBP</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-fbp/FbpBreakpoints/" class="">FbpBreakpoints</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-3e40020dcb75400959dcadfc7e247453" class="toggle"  />
    <label for="section-3e40020dcb75400959dcadfc7e247453" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-framework/" class="">@furo/framework</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/BaseSpecValidators/" class="">BaseSpecValidators</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/Env/" class="">Env</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/FuroFeatureToggle/" class="">FuroFeatureToggle</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/i18n/" class="">i18n</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/Init/" class="">Init</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/KeyState/" class="">KeyState</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/NodeEvent/" class="">NodeEvent</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroBigDecimal/" class="">ValidatorFuroBigDecimal</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroFatNumeric/" class="">ValidatorFuroFatNumeric</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroFatString/" class="">ValidatorFuroFatString</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorFuroReference/" class="">ValidatorFuroReference</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufBoolValue/" class="">ValidatorGoogleProtobufBoolValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufFloatValue/" class="">ValidatorGoogleProtobufFloatValue</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufInt64Value/" class="">ValidatorGoogleProtobufInt64Value</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleProtobufTimestamp/" class="">ValidatorGoogleProtobufTimestamp</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleTypeDate/" class="">ValidatorGoogleTypeDate</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorGoogleTypeMoney/" class="">ValidatorGoogleTypeMoney</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-framework/ValidatorRegistry/" class="">ValidatorRegistry</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-71921f8b00ba9f1d7ea65557f9a4892b" class="toggle"  />
    <label for="section-71921f8b00ba9f1d7ea65557f9a4892b" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-layout/" class="">@furo/layout</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-backdrop/" class="">furo-backdrop</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-backdrop-display/" class="">furo-backdrop-display</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-empty-spacer/" class="">furo-empty-spacer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-form-layouter/" class="">furo-form-layouter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-horizontal-flex/" class="">furo-horizontal-flex</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-resizer/" class="">furo-resizer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-split-view/" class="">furo-split-view</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-vertical-flex/" class="">furo-vertical-flex</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-layout/furo-vertical-scroller/" class="">furo-vertical-scroller</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-d417ac8cb7a1ccb4381e8ddf1c7562a0" class="toggle"  />
    <label for="section-d417ac8cb7a1ccb4381e8ddf1c7562a0" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-route/" class="">@furo/route</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-app-flow/" class="">furo-app-flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-app-flow-router/" class="">furo-app-flow-router</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-document-title/" class="">furo-document-title</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-location/" class="">furo-location</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-location-updater/" class="">furo-location-updater</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-lock-navigation/" class="">furo-lock-navigation</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-pages/" class="">furo-pages</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/furo-panel-coordinator/" class="">furo-panel-coordinator</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/BasePanel/" class="">BasePanel</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-route/panelRegistry/" class="">panelRegistry</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-97a0e3b8ee9f906213df62a54586924e" class="toggle"  />
    <label for="section-97a0e3b8ee9f906213df62a54586924e" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-util/" class="">@furo/util</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-config/" class="">furo-config</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-config-loader/" class="">furo-config-loader</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-de-bounce/" class="">furo-de-bounce</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-demo-snippet/" class="">furo-demo-snippet</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-feature-toggle/" class="">furo-feature-toggle</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-fetch-json/" class="">furo-fetch-json</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-forth-stack/" class="">furo-forth-stack</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-get-clipboard/" class="">furo-get-clipboard</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-graph-renderer/" class="">furo-graph-renderer</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-head-tail/" class="">furo-head-tail</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-hp-35/" class="">furo-hp-35</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-interval-pulse/" class="">furo-interval-pulse</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-key-filter/" class="">furo-key-filter</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-keydown/" class="">furo-keydown</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-markdown/" class="">furo-markdown</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-navigation-pad/" class="">furo-navigation-pad</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-pretty-json/" class="">furo-pretty-json</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-put-clipboard/" class="">furo-put-clipboard</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/furo-show-flow/" class="">furo-show-flow</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/light-bulb/" class="">light-bulb</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/Config/" class="">Config</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/ConfigTree/" class="">ConfigTree</a>
  

        </li>
      
    
      
        <li>
          
  
  

  
    <a href="https://web-components.furo.pro/docs/modules/furo-util/EmptyStackError/" class="">EmptyStackError</a>
  

        </li>
      
    
  </ul>

        </li>
      
    
      
        <li>
          
  
  

  
    <input type="checkbox" id="section-e8b2e199854a11484105b91a892831fe" class="toggle"  />
    <label for="section-e8b2e199854a11484105b91a892831fe" class="flex justify-between">
      <a href="https://web-components.furo.pro/docs/modules/furo-webtypes/" class="">@furo/web-types</a>
      <span>▾</span>
    </label>
  

          
  <ul>
    
  </ul>

        </li>
      
    
  </ul>

        </li>
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
      
    
  </ul>











  
<ul>
  
  <li>
    <a href="https://ui5.furo.pro" target="_blank" rel="noopener">
        SAP UI5 Integration
      </a>
  </li>
  
  <li>
    <a href="https://furo.pro" target="_blank" rel="noopener">
        フロー Furo
      </a>
  </li>
  
</ul>






</nav>




  <script>(function(){var e=document.querySelector("aside.book-menu nav");addEventListener("beforeunload",function(){localStorage.setItem("menu.scrollTop",e.scrollTop)}),e.scrollTop=localStorage.getItem("menu.scrollTop")})()</script>


 
    </aside>

    <div class="book-page">
      <header class="book-header">
        
  <div class="flex align-center justify-between">
  <label for="menu-control">
    <img src="/svg/menu.svg" class="book-icon" alt="Menu" />
  </label>

  <strong>Feature Toggles</strong>

  <label for="toc-control">
    
    <img src="/svg/toc.svg" class="book-icon" alt="Table of Contents" />
    
  </label>
</div>


  
  <aside class="hidden clearfix">
    
  <nav id="TableOfContents">
  <ul>
    <li><a href="#hints">Hints:</a></li>
    <li><a href="#initialization">Initialization</a></li>
    <li><a href="#supported-toggles-for-web-components-or-html">Supported toggles for Web Components or HTML</a>
      <ul>
        <li><a href="#data-furo-toggle-append">data-furo-toggle-append</a></li>
        <li><a href="#data-furo-toggle-remove">data-furo-toggle-remove</a></li>
        <li><a href="#data-furo-toggle-hide">data-furo-toggle-hide</a></li>
        <li><a href="#data-furo-toggle-show">data-furo-toggle-show</a></li>
        <li><a href="#data-furo-toggle-disable">data-furo-toggle-disable</a></li>
        <li><a href="#data-furo-toggle-enable">data-furo-toggle-enable</a></li>
      </ul>
    </li>
    <li><a href="#helpers-and-utils">Helpers and Utils</a></li>
  </ul>
</nav>


  </aside>
  
 
      </header>

      
      
  <article class="markdown"><h1 id="feature-toggles">
  Feature Toggles
  <a class="anchor" href="#feature-toggles">#</a>
</h1>
<p>Use 
  <a href="/docs/modules/furo-framework/FuroFeatureToggle/">FuroFeatureToggle</a> to implement toggles for the following scenarios:   <sup id="fnref:1"><a href="#fn:1" class="footnote-ref" role="doc-noteref">1</a></sup></p>
<ul>
<li><strong>release toggles</strong> - in the context of Continuous Delivery, unfinished features are toggled off, and only activated when the feature is ready. However, the source code is transferred to the master branch earlier and deployed to the various stages.</li>
<li><strong>experiment toggles</strong> - the classic, for example for A/B tests</li>
<li><strong>ops toggles</strong> - this refers to switches under operational aspects. For example, when new features are rolled out and the performance behavior of the application is still unclear, the feature can simply be turned off if problems occur during operation. As far as everything runs stable, the switches are removed.</li>
<li><strong>permission toggles</strong> - certain features are made available only to a subset of users, or to users with extended privileges.</li>
</ul>
<h2 id="hints">
  Hints:
  <a class="anchor" href="#hints">#</a>
</h2>
<ul>
<li>read 
  <a href="https://www.flagship.io/feature-toggle-best-practices/">feature-toggle-best-practices from flagship.io</a></li>
<li>Keep toggle scope as small as possible</li>
<li>Always expose feature toggle configurations</li>
<li>Have a standardized toggle naming scheme</li>
<li>For enabling or hiding buttons, based on a HATEOAS response, use 
  <a href="/docs/modules/furo-data/furo-hateoas-state/">furo-hateoas-state</a>.</li>
</ul>
<h2 id="initialization">
  Initialization
  <a class="anchor" href="#initialization">#</a>
</h2>
<p>If you want to init your keys, register them with <code>registerKeyMap</code>.
This method can be called at any time, because a uninitialized key defaults to the false state.</p>
<div class="highlight"><div style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">
<table style="border-spacing:0;padding:0;margin:0;border:0;"><tr><td style="vertical-align:top;padding:0;margin:0;border:0;">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">1
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">2
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">3
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">4
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">5
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">6
</span><span style="white-space:pre;-webkit-user-select:none;user-select:none;margin-right:0.4em;padding:0 0.4em 0 0.4em;color:#7f7f7f">7
</span></code></pre></td>
<td style="vertical-align:top;padding:0;margin:0;border:0;;width:100%">
<pre tabindex="0" style="background-color:#fff;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-js" data-lang="js"><span style="display:flex;"><span><span style="color:#000;font-weight:bold">import</span> { FuroFeatureToggle } from <span style="color:#d14">&#39;@furo/framework/src/FuroFeatureToggler/FuroFeatureToggle.js&#39;</span>;
</span></span><span style="display:flex;"><span>  
</span></span><span style="display:flex;"><span>FuroFeatureToggle.registerKeyMap({
</span></span><span style="display:flex;"><span>  <span style="color:#d14">&#34;feature.a&#34;</span><span style="color:#000;font-weight:bold">:</span><span style="color:#000;font-weight:bold">true</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#d14">&#34;feature.b&#34;</span><span style="color:#000;font-weight:bold">:</span><span style="color:#000;font-weight:bold">true</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#d14">&#34;feature.c&#34;</span><span style="color:#000;font-weight:bold">:</span><span style="color:#000;font-weight:bold">false</span>,
</span></span><span style="display:flex;"><span>});
</span></span></code></pre></td></tr></table>
</div>
</div><p><em>init.js</em></p>
<h2 id="supported-toggles-for-web-components-or-html">
  Supported toggles for Web Components or HTML
  <a class="anchor" href="#supported-toggles-for-web-components-or-html">#</a>
</h2>
<p>The lib supports the following cases, for direct usage in your html:</p>
<h3 id="data-furo-toggle-append">
  data-furo-toggle-append
  <a class="anchor" href="#data-furo-toggle-append">#</a>
</h3>
<p>Appends the element on true state of the key and removes the element from the dom on false state.
This will also happen if you change the state of the toggle, at a later time.</p>
<blockquote>
<p>For this, you have to write the tag in the HTML, to avoid flickering,
you can import the needed component with a toggle callback.</p>
</blockquote>
<h3 id="data-furo-toggle-remove">
  data-furo-toggle-remove
  <a class="anchor" href="#data-furo-toggle-remove">#</a>
</h3>
<p>This behaves like the append toggle, but the difference is, that it
removes the element on true state of the key and will append the element on a false state</p>
<h3 id="data-furo-toggle-hide">
  data-furo-toggle-hide
  <a class="anchor" href="#data-furo-toggle-hide">#</a>
</h3>
<p>Will add a <code>hidden=&quot;&quot;</code>  attribute to the element on true state of the key
and removes the attribute on a false state.</p>
<h3 id="data-furo-toggle-show">
  data-furo-toggle-show
  <a class="anchor" href="#data-furo-toggle-show">#</a>
</h3>
<p>Is the counter component for hide. It removes a hidden attribute from the element on true state of the key and adds the attribute on a false state</p>
<h3 id="data-furo-toggle-disable">
  data-furo-toggle-disable
  <a class="anchor" href="#data-furo-toggle-disable">#</a>
</h3>
<p>Will add a <code>disabled=&quot;&quot;</code>  attribute to the element on true state of the key and removes the attribute on a false state.</p>
<h3 id="data-furo-toggle-enable">
  data-furo-toggle-enable
  <a class="anchor" href="#data-furo-toggle-enable">#</a>
</h3>
<p>Is the counter component for disable. It removes a disabled attribute from the element on true state of the key and adds the <code>disabled</code> attribute on a false state</p>
<h2 id="helpers-and-utils">
  Helpers and Utils
  <a class="anchor" href="#helpers-and-utils">#</a>
</h2>
<p>At the moment, there is only the <code>furo-feature-toggle</code> component available.
Feel free to file an issue with a feature request, if you miss something.</p>
<div class="footnotes" role="doc-endnotes">
<hr>
<ol>
<li id="fn:1">
<p>
  <a href="https://de.wikipedia.org/wiki/Feature_Toggle">Wikipedia (de)</a>, 
  <a href="https://en.wikipedia.org/wiki/Feature_toggle">Wikipedia (en)</a>&#160;<a href="#fnref:1" class="footnote-backref" role="doc-backlink">&#x21a9;&#xfe0e;</a></p>
</li>
</ol>
</div>
</article>
 
      

      <footer class="book-footer">
        
  <div class="flex flex-wrap justify-between">



  <div><a class="flex align-center" href="https://github.com/theNorstroem/furo/documentation/commit/c67703cbcaa2b274084d09563e398689848aa81e" title='Last modified by veith | October 24, 2022' target="_blank" rel="noopener">
      <img src="/svg/calendar.svg" class="book-icon" alt="Calendar" />
      <span>October 24, 2022</span>
    </a>
  </div>



</div>

 
        
      </footer>

      
  
  <div class="book-comments">

</div>
  
 

      <label for="menu-control" class="hidden book-menu-overlay"></label>
    </div>

    
    <aside class="book-toc">
      
  <nav id="TableOfContents">
  <ul>
    <li><a href="#hints">Hints:</a></li>
    <li><a href="#initialization">Initialization</a></li>
    <li><a href="#supported-toggles-for-web-components-or-html">Supported toggles for Web Components or HTML</a>
      <ul>
        <li><a href="#data-furo-toggle-append">data-furo-toggle-append</a></li>
        <li><a href="#data-furo-toggle-remove">data-furo-toggle-remove</a></li>
        <li><a href="#data-furo-toggle-hide">data-furo-toggle-hide</a></li>
        <li><a href="#data-furo-toggle-show">data-furo-toggle-show</a></li>
        <li><a href="#data-furo-toggle-disable">data-furo-toggle-disable</a></li>
        <li><a href="#data-furo-toggle-enable">data-furo-toggle-enable</a></li>
      </ul>
    </li>
    <li><a href="#helpers-and-utils">Helpers and Utils</a></li>
  </ul>
</nav>

 
    </aside>
    
  </main>

  
</body>


<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.6.0/dist/doc-helper.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@furo/precompiled@2.6.0/dist/furo-fbp.js"></script>
</html>












